<template>
  <div class="content_left">
    <a-button @click="paintOn">
      创建圆形
    </a-button>
  </div>
</template>

<script>
import { Button } from 'ant-design-vue';
import Konva from 'konva';
import { mapState, mapMutations} from 'vuex';
export default ({
  components:{
    AButton: Button
  },
  inject: ['pageStage', 'pageLayer'],
  data() {
    return {
      
    }
  },
  computed: mapState({ circle: state => state.circle }),
  methods: {
    ...mapMutations(['changeClassName']),
    paintOn() {
      this.changeClassName({className: 'Circle'})
      const layer = this.pageLayer.value;
      const stage = this.pageStage.value;
      stage.off();
      stage.on('contextmenu',function(e) {
        e.evt.preventDefault();
        return;
      })
      const graph = new Konva.Circle(this.circle);
      layer.add(graph);
      layer.batchDraw()
    }
  }
})
</script>

<style scoped lang="less">

.content_left{
  margin-top: 35px;
}

</style>
